/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-10-16 08:40:20
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-16 11:56:59
 * @FilePath: /react18-vite-admin/src/views/system/RolesManage/components/EditView.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Form, Input, TreeSelect, Row, Col } from 'antd';

import CustomDialog from '@/components/ui/CustomDialog/CustomDialog';
import CustomCard from '@/components/ui/CustomCard/CustomCard';
import { useRules } from '@/service/useRules';
import Button from '@/components/ui/Button/Button';
import CenterGap10 from '@/components/ui/CenterGap10/CenterGap10';
import LoadingPage from '@/components/ui/LoadingPage/LoadingPage';

import { useForm } from './useForm';

const EditView = (props: {
    open: boolean;
    id?: number;
    onClose: () => void;
    afterSubmit: () => void;
}) => {
    const { open, id, onClose, afterSubmit } = props;

    const [formRef] = Form.useForm();

    const { requiredRule } = useRules();

    const {
        title,
        formModel,
        setFormModel,
        menuTreeItems,
        handleSubmit,
        handleEdit,
        loading,
        saveLoading
    } = useForm(formRef, id, open, afterSubmit);

    return (
        <CustomDialog title={title} open={open} onClose={onClose}>
            <CustomCard title="">
                <LoadingPage loading={loading} style={{ minHeight: '300px' }}>
                    <Form
                        form={formRef}
                        onFinish={handleSubmit}
                        onReset={() => handleEdit(id)}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <Row>
                            <Col span="8">
                                <Form.Item
                                    label="角色名称"
                                    name="name"
                                    rules={requiredRule}
                                >
                                    <Input
                                        value={formModel.name}
                                        onChange={(e) =>
                                            setFormModel((draft) => {
                                                draft.name = e.target.value;
                                            })
                                        }
                                        placeholder="请输入角色名称"
                                        allowClear
                                    ></Input>
                                </Form.Item>
                            </Col>
                            <Col span="16">
                                <Form.Item
                                    label="角色描述"
                                    name="description"
                                    rules={requiredRule}
                                >
                                    <Input
                                        value={formModel.description}
                                        onChange={(e) =>
                                            setFormModel((draft) => {
                                                draft.description =
                                                    e.target.value;
                                            })
                                        }
                                        placeholder="请输入角色描述"
                                        allowClear
                                    ></Input>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <Form.Item
                                    label="菜单权限"
                                    name="menuIdList"
                                    rules={requiredRule}
                                >
                                    <TreeSelect
                                        placeholder="请选择"
                                        value={formModel.menuIdList}
                                        treeData={menuTreeItems}
                                        onChange={(value) =>
                                            setFormModel((draft) => {
                                                draft.menuIdList = value;
                                            })
                                        }
                                        treeDefaultExpandAll
                                        treeCheckable
                                        allowClear
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                        <CenterGap10>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={saveLoading}
                            >
                                提交
                            </Button>
                            <Button htmlType="reset" loading={saveLoading}>
                                重置
                            </Button>
                        </CenterGap10>
                    </Form>
                </LoadingPage>
            </CustomCard>
        </CustomDialog>
    );
};

export default EditView;
